<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS_解决浮动后的影响</title>
    <style>
        .outer {
            width: 500px;
            background-color: gray;
            border: 1px solid black;
            /* first */
            /* height: 122px; */
            /* second */
            /* float: left; */
            /* third */
            /* overflow: hidden; */
            /* forth */

        }

        .box {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            border: 1px solid black;
            margin: 10px;
        }

        .box1,
        .box2,
        .box3,
        .box4 {
            float: left;
        }

        .mofa {
            /* 4 */
            clear: both;
        }

        .outer::after {
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
        <!-- <div class="mofa"></div> -->
    </div>
    <div style="background-color: orange;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum cupiditate
        fuga pariatur earum dolores nesciunt
        eius molestias deleniti, quia ad? Aspernatur itaque dolorum sapiente ducimus asperiores tenetur, dolores cum
        nam, alias inventore ab facilis quae nemo! Culpa veritatis iste quas inventore voluptas quidem facere odit
        voluptatem adipisci quibusdam obcaecati totam, corrupti ex consequatur alias sequi, quisquam id optio quae
        impedit aliquid dolorum doloremque molestiae reprehenderit! Modi assumenda impedit obcaecati asperiores sint
        tempora eveniet tenetur et, doloremque laboriosam explicabo labore molestiae deserunt iusto! Nesciunt ex
        delectus rerum odio explicabo ullam perspiciatis quas, id labore corrupti quam quaerat? Cumque reiciendis atque
        vero delectus odit harum tenetur, ullam corporis inventore odio itaque mollitia asperiores, voluptatem dicta
        nobis adipisci sint labore aliquid. Eligendi maxime natus explicabo aut, dolore totam quae optio soluta
        doloribus aperiam iste, vitae molestiae ut deserunt velit et repellendus adipisci voluptatem sed ipsam voluptate
        vero rerum quasi. Delectus ex ducimus optio iure facilis rerum sit iusto atque alias excepturi, dolor maiores
        voluptatum dignissimos at possimus voluptatibus vero, corporis veritatis harum ullam qui neque vitae. Optio
        saepe quasi doloribus incidunt sapiente reiciendis aspernatur ipsa. Cupiditate eius dolores labore explicabo.
        Delectus quae ipsam aspernatur repellat, laboriosam illum sapiente consectetur alias nulla, error aperiam?</div>
</body>

</html>